wilwaldon writes a curated toolkit of 70+ tools'' skills, plugins, MCP servers, and CLAUDE.md config snippets'' organized by use case to help Claude Code produce better-looking frontend output, covering everything from aesthetic direction and site-wide theming through animation, Figma-to-code pipelines, browser automation testing, and deployment.
- The "essentials" stack for any project is just three commands: the official frontend-design skill, Context7 (live docs), and Playwright MCP
- MCP servers consume ~55k tokens at session start; skills load only ~100 tokens, making them a cheaper way to inject specialized knowledge
- Figma's MCP server now supports "Code to Canvas" (Feb 2026), pushing a running UI back into Figma as editable layers
- The Design Tokens skill derives an entire OKLCH color palette from a single `--brand-hue` number
- The "essentials" stack for any project is just three commands: the official frontend-design skill, Context7 (live docs), and Playwright MCP
- MCP servers consume ~55k tokens at session start; skills load only ~100 tokens, making them a cheaper way to inject specialized knowledge
- Figma's MCP server now supports "Code to Canvas" (Feb 2026), pushing a running UI back into Figma as editable layers
- The Design Tokens skill derives an entire OKLCH color palette from a single `--brand-hue` number
A collection of specialized skills designed to improve how AI coding agents handle frontend development. Instead of producing generic or uninspired interfaces, these instructions enable AI tools to generate modern, premium designs characterized by high visual quality, proper spacing, and sophisticated animations. The system is framework-agnostic and works across major AI agents like Cursor, Claude Code, and GitHub Copilot via a simple CLI installation.
Main features include:
- Specialized skill variants for different design aesthetics such as soft UI, minimalist editorial styles, and brutalist interfaces.
- A three-dial parameterization system to adjust design variance, motion intensity, and visual density.
- An output-skill designed to prevent AI laziness by stopping placeholder comments and skipped code blocks.
Main features include:
- Specialized skill variants for different design aesthetics such as soft UI, minimalist editorial styles, and brutalist interfaces.
- A three-dial parameterization system to adjust design variance, motion intensity, and visual density.
- An output-skill designed to prevent AI laziness by stopping placeholder comments and skipped code blocks.
